<template>
   <div class="form-group">
        <div class="input-group">
            <input :type="type" class="form-control" :value="password"
                @input="$emit('input',$event.target.value)" />
            <div class="input-group-append">
                <button type="button" class="btn btn-primary"
                    v-on:click="isShowPassword=!isShowPassword">{{buttonText}}</button>
                </div>
            </div>
        </div>
</template>

<script>
export default {
    name:'PasswordInput',
    model: {
        prop: "password",
        event: 'input'
            },
    props: {
        password: {
        default: ''
        }
    },
    data: function () {
        return {
            isShowPassword: false
        }
    },
    computed: {
        buttonText: function () {
            return this.isShowPassword ? '隐藏' : '显示'
        },
        type: function () {
            return this.isShowPassword ? 'text' : 'password'
        }
    },
}
</script>